<template>
  <div>
    <div class="t1" :class="bgc === true ? 'redcat' : 'bgccat'">
      <navTopVue></navTopVue>
    </div>
    <swipe></swipe>
    <div class="tiele">
      <squareVue></squareVue>
    </div>
    <horimgVue></horimgVue>
    <tabBarVue class="tabbut"></tabBarVue>
  </div>
</template>

<script>
import navTopVue from "./views/navTop.vue";
import tabBarVue from "../../components/tabBar.vue";
import swipe from "./views/Swipe.vue";
import squareVue from "./views/square.vue";
import horimgVue from "./views/hor_img.vue";
export default {
  data() {
    return {
      bgc: false,
      scrd: 0,
    };
  },
  methods: {
    // 获取页面滚去头部
    scr() {
      let tiele = document.querySelector(".tiele").offsetTop;
      this.scrd = tiele;
      window.onscroll = () => {
        let scrollTop = document.documentElement.scrollTop;
        if (scrollTop > this.scrd) {
          this.bgc = true;
        } else {
          this.bgc = false;
        }
      };
    },
  },
  components: {
    navTopVue,
    swipe,
    squareVue,
    horimgVue,
    tabBarVue,
  },
  mounted() {
    this.scr();
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin";
.t1 {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 80px;
  line-height: 80px;
  z-index: 1000;
}
.bgccat {
  background: rgba(0.3, 0.3, 0.3, 0);
}
.redcat {
  background-color: red !important;
}
.tabbut {
  margin-top: 100px;
}
</style>